import React, { useState } from 'react'
import "./index.css"
export default function Item({ todo, done }) {
  //isActive状态用来保存li的active类是否添加和按钮的display状态
  const [isActive, setIsActive] = useState(false);

  //鼠标移入li事件函数     这个也就是函数枸里化
  const mouseHandle = (bool) => {
 
  // 外层函数用来接收参数,返回的函数是真正的事件函数
   return () =>{
    setIsActive(bool)
   }
  }

  return (
    <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive ? "active" : ""}>
      <label>
        <input type="checkbox" defaultChecked={done} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
